﻿@{
    ViewBag.Title = "教学统计";
}
@section headerSection{
@*<link href="~/Resources/mainFrame/js/plugins/zTree3/css/demo.css" rel="stylesheet" />*@
<link href="~/Resources/mainFrame/js/plugins/zTree3/css/metroStyle/metroStyle.css" rel="stylesheet" />
<script src="~/Resources/mainFrame/js/plugins/zTree3/js/jquery.ztree.core.min.js"></script>
<script src="~/Resources/mainFrame/js/plugins/zTree3/js/jquery.ztree.excheck.min.js"></script>
<script src="~/Resources/mainFrame/js/plugins/zTree3/js/jquery.ztree.exedit.min.js"></script>
<script src="~/Resources/tools/search_zTree.js"></script>
<script src="~/Resources/tools/HRHelp.js"></script>
<style>
    body {
        font-family: '微软雅黑';
        font-size: 14px;
        color: #676a6c;
    }
</style>
}
<div class="wrapper animated fadeInRight autoHeight">
    <!-- Panel Other -->
    <div class="row autoHeight" style="background-color: #fff;">
        <!--选择单位-->
        <div id="unitTree" class="col-sm-3" style="width:220px;height:100%;padding:0;border:1px solid #E7EAEC;"></div>
        <div class="col-sm-9 col-sm-leftRight" style="width: calc(100% - 220px);padding-left: 3px; margin-top: 2px;">
            <!-- Example Toolbar -->
            <div class="example">
                <div class="btn-group hidden-xs form-inline" id="exampleToolbar" role="group">
                        <div class="form-group" style="margin-top:-2px;">
                            <input id="keyword" name="keyword" type="text" style="width:160px;" class="form-control" placeholder="姓名">
                        </div>
                        <div class="form-group" style="width:160px;margin-top:-7px;">
                            <select id="proStatus" name="proStatus" title="请选择状态" class="form-control input-sm selectpicker" placeholder="请选择状态">
                                <option value="">全部</option>
                                <option value="ok">达标</option>
                                <option value="err">未达标</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <button id="btnSearch" class="btn btn-primary" type="button"><i class="fa fa-search"></i>&nbsp;查询</button>
                        </div>
                        <div class="form-group">
                            <button id="btnLearn" class="btn btn-primary" type="button"><i class="glyphicon glyphicon-shopping-cart"></i>&nbsp;学习详情</button>
                        </div>
                </div>
                <table id="exampleTableToolbar" data-mobile-responsive="true" data-radio="true" style="table-layout: fixed !important;"></table>
            </div>
            <!-- End Example Toolbar -->
        </div>
    </div>
    <!-- End Panel Other -->
</div>

@section footSection{
<script src="~/Resources/x-editable/js/bootstrap-editable.js"></script>
<script src="~/Resources/duallistbox/jquery.bootstrap-duallistbox.min.js"></script>
<script>
    var fileId, options, $table, unitzTree;
    var unit_code, class_id,is_unit=true;
    var entryManager = {
        initPage: function () {
            showLoadBoxs();
            entryManager.initTable();
            entryManager.bindZtree();
            entryManager.initBind();
            delLoadBoxs();
        },
        initTable: function () {
            options = {
                url: ctx + "/Teach/GetTeachData",
                cutHeight: 5,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                toolbar: "#exampleToolbar",
                queryParams: function (params) {
                    params = {
                        rows: params.limit,
                        //页面大小
                        page: params.offset / params.limit + 1,
                        keyword: $('#keyword').val(),
                        proStatus: $('#proStatus').val(),
                        is_unit: is_unit,
                        code: (is_unit) ? unit_code : class_id.toString()
                    }
                    return params;
                },
                columns: [
                    {
                        radio: true
                    },
                    {
                        field: '',//第一列序号
                        title: '序号',
                        align: 'center',
                        width: 50,
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    },
                    {
                        field: 'className',
                        title: '所属班级',
                        align: 'center'
                    }, {
                        field: 'user_name',
                        title: '姓名',
                        align: 'center'
                    }, {
                        field: 'file_name',
                        title: '课件名称',
                        align: 'center'
                    }, {
                        field: 'type_text',
                        title: '所属分类',
                        align: 'center'
                    }, {
                        field: 'learn_len',
                        title: '完成时长',
                        align: 'center',
                        formatter: function (value, row, index) {
                            if (value) {
                                if (value > 60)
                                    return (value / 60).toFixed(2) + "小时";
                                return value + "分钟";
                            }
                            return "";
                        }
                    }, {
                        field: 'finsh_len',
                        title: '状态',
                        align: 'center',
                        formatter: function (value, row, index) {
                            if (row.learn_len && row.learn_len >= value)
                                return "<span class='label label-success'>达标</span>";
                            return "<span class='label label-danger'>未达标</span>";
                        }
                    }, {
                        field: 'out_time',
                        title: '最后退出时间',
                        align: 'center',
                        formatter: function (value, row, index) {
                            if (value)
                                return $.formatDataLong(value);
                            return "";
                        }
                    }]
            }
            $table = tableHelper.initTable("exampleTableToolbar", options);
        },
        initBind: function () {
            //查询
            $('#btnSearch').on('click', function () {
                $table.bootstrapTable('refresh', options);
            });
            //详情
            $('#btnLearn').on('click', function () {
                var row = $table.bootstrapTable('getSelections');
                if (!row || row.length === 0) {
                    layer.msg("数据为空或未选中记录行~", { icon: 5 });
                    return false;
                }
                var indexForm = layer.open({
                    id: 'ifreamFileListData',
                    title: ['学习记录', 'font-size:18px;'],
                    type: 2,
                    content: ctx + '/Teach/DetialList?file_id=' + row[0].file_id + '&user_id=' + row[0].user_id + '&unit_name=' + row[0].className + '&type_text=' + row[0].type_text,
                    scroll: true,//是否显示滚动条、默认不显示
                    btn: null,
                    area: ['1000px', '95%'],
                    yes: function (li, o) {
                    },
                    cancel: function (li, o) {

                    }
                });
            });
        },
        //初始化单位树
        bindZtree: function () {
            var setting = {
                view: {
                    showIcon: true,
                    selectedMulti: false,
                    fontCss: getFontCss
                },
                edit: {
                    enable: true,
                    showRemoveBtn: false,
                    showRenameBtn: false
                },
                async: {
                    enable: true,
                    dataType: "text",
                    type: "post",
                    url: ctx + "/Teach/GetUnitTreeData",
                    autoParam: ["id"]
                },
                data: {
                    key: { title: "name", name: "name" },
                    simpleData: { enable: true, idKey: "id", pIdKey: "pId", rootPId: 0 }
                },
                check: {
                    enable: false,
                    autoCheckTrigger: true,
                    chkStyle: "checkbox",
                    chkboxType: { "Y": "p", "N": "ps" }
                },
                callback: {
                    onAsyncError: function () {
                        layer.msg("初始化单位结构树失败~", { icon: 5 });
                    },
                    onAsyncSuccess: function (event, treeId, treeNode, msg) {
                        //树加载完成后执行
                        var obj = unitzTree.getNodes()[0];
                        if (obj) {
                            unitzTree.selectNode(obj);
                            unitzTree.setting.callback.onClick(null, unitzTree.setting.treeId, obj);//模拟点击事件 
                            if (obj.children && obj.children.length > 0)
                                unitzTree.expandNode(obj);
                        }
                    },
                    onClick: function (event, treeId, treeNode) {
                        $('#unitTree a').css("color", "#333");
                        $('#' + treeNode.tId + '_a').css("color", "#ffffff");
                        checkNodeSpan = treeNode.tId + '_span';
                        selNode = treeNode;//选中节点
                        is_unit = treeNode.is_unit;
                        if (treeNode.is_unit)
                            unit_code = treeNode.unit_code;
                        else
                            class_id = treeNode.id;
                        if ($table && treeNode.id > 0)
                            $table.bootstrapTable('refresh', options);//刷新Table
                    },
                    //拖拽回调
                    //beforeDrag: function (treeId, treeNodes) {
                    //    for (var i = 0, l = treeNodes.length; i < l; i++) {
                    //        if (!treeNodes[i].drag)
                    //            return false;
                    //    }
                    //    return true;
                    //},
                    beforeDrop: function (treeId, treeNodes, targetNode, moveType) {
                        return targetNode ? targetNode.drop !== false : true;
                    }
                }
            };
            unitzTree = $("#unitTree").initzTreeView(setting, 'ushow', true);
            unitzTree.setting.edit.drag.isCopy = false;
            unitzTree.setting.edit.drag.isMove = true;
            unitzTree.setting.edit.drag.prev = true;
            unitzTree.setting.edit.drag.inner = false;
            unitzTree.setting.edit.drag.next = true;
        }
    }
    $(function () {
        entryManager.initPage();
    });
</script>
}